<template>
  <div>
    <mytitle msg="我的关注" @click.native="goback"></mytitle>
    <!--循环遍历获取的数据-->
    <div class="focus" v-for="item in getdata" :key="item.id">
      <img
        :src="$axios.defaults.baseURL + item.head_img"
        alt=""
        v-if="item.head_img"
      />
      <img src="@/assets/mypic.png" alt="" />
      <div class="focusname">
        <div class="news">{{ item.nickname }}</div>
        <span class="time">2019-10-10</span>
      </div>
      <button class="cancelfocus" @click="unfollow(item.id)">取消关注</button>
    </div>
    <button @click="focusone(1)">添加关注用户</button>
    <button @click="focusone(2)">添加关注用户</button>
    <button @click="focusone(3)">添加关注用户</button>
    <button @click="focusone(4)">添加关注用户</button>
  </div>
</template>

<script>
import mytitle from "@/components/mytitle";
export default {
  components: {
    mytitle,
  },
  data() {
    return {
      getdata: [],
    };
  },
  created() {
    this.renderpage();
  },
  methods: {
    renderpage() {
      this.$axios({
        url: "/user_follows",
      }).then((res) => {
        this.getdata = res.data.data;
        console.log(this.getdata);
      });
    },
    //自己点击添加关注
    focusone(id) {
      this.$axios({
        method: "get",
        url: "/user_follows/" + id,
      }).then((res) => {});
    },
    //点击取消关注
    unfollow(id) {
      this.$axios({
        url: "/user_unfollow/" + id,
      }).then((res) => {
        if (res.data.message === "取消关注成功") {
          this.renderpage();
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.focus {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(204, 204, 204);
  padding: 10 / 360 * 100vw 20 / 360 * 100vw;

  .focusname {
    flex: 1;
    .time {
      font-size: 15 / 360 * 100vw;
    }
  }
  img {
    width: 60 / 360 * 100vw;
    height: 60 / 360 * 100vw;
    border-radius: 50%;
    object-fit: cover;
    // width: 100%;
  }
  .cancelfocus {
    border: 1px solid rgb(230, 230, 230);
    font-size: 12 / 360 * 100vw;
    padding: 0 4 / 360 * 100vw;
    height: 28 / 360 * 100vw;
    width: 70 / 360 * 100vw;
    border-radius: 14 / 360 * 100vw;
  }
}
</style>